<script type="text/javascript">
    function visibleRoof(){
        if(document.getElementById('changedRoof').checked){
            document.getElementById('yearChangedRoof').removeAttribute('readonly');
            document.getElementById('changedCheckedRoof').style.color="black";
        }
        else{
            document.getElementById('yearChangedRoof').setAttribute('readonly', 'readonly');
            document.getElementById('changedCheckedRoof').style.color="grey";
        }
        displayCeilingFloor();
    }
</script>


    <div style="padding-top: 20px; padding-left: 20px"><p id="subtitle"><?php echo TXT_TAB_ROOF; ?></p></div>
   
    <form id="roofForm" method="POST">
        <div id="content">
        <div style=" background-color: #f2f2f2; margin : 10px; padding : 20px; border-radius: 10px; Box-shadow: 2px 2px 8px 1px rgba(0,0,0,0.4);">
            <table id="roofTab">
                <tr>
                    <td><img src="../images/forms/generalitiesShapes/roofA.png" id="roofPicture"/></td>
                </tr>
                <tr>
                    <th  style="text-align: left;  vertical-align: top;">
                        <br>
                        <?php echo TXT_AREA; ?>
                    </th>
                    <td>
                        <br>
                        <input type="number" name="roofArea" id="roofAreaId" onblur="displayCeilingFloor()" /> m²
                    </td>
                </tr>
                <td>
                <tr>
                    <th  style="text-align: left;  vertical-align: top;">
                        <?php echo TXT_CHANGED_ROOF; ?>
                        <input type="checkbox" id="changedRoof" name="changedRoof" onclick="visibleRoof()" />
                    </th>
                    </td>
                    <td>
                    <span id="changedCheckedRoof"><?php echo TXT_CHANGED_YEAR; ?></span>
                    <input type="date" id="yearChangedRoof" name="yearChangedRoof" onblur="displayCeilingFloor()" readonly />  
                    </td>
                </tr>
            </table>
        </div>
    </div>
    </form>
